<template>
  <div class="full">
    <div class="nav-box">
      <List></List>
    </div>
    <div :class="{greet:true,hide:hideGreet}">
      想要看Gist详情，请点击左侧Gist标题
    </div>
    <div class="tab-box">
      <router-view>
      </router-view>
    </div>
  </div>
</template>

<script>
  import bus from '@/bus.js'
  import List from '@/components/List/List'

  export default {
    name: "Gists",
    components:{List},
    data(){
        return {
          hideGreet:false,
        }
    },
    mounted(){
      bus.$on("showGistDetails",()=>{
        this.hideGreet= true;
      });
      bus.$on("hideGistDetails",()=>{
        this.hideGreet= false;
      });
    }
  }
</script>

<style scoped>
  .greet{
    text-align: center;
    font-size:14px;
    top: 300px;
    position: relative;
    margin-left: 240px;
  }
  .full{
    position: relative;
    z-index: 0;
    top: 40px;
  }
  .nav-box{
    width: 220px;
    top: 40px;
    left: 0;
    bottom: 0;
    position: fixed;
    z-index: 1;
    background: #ececec;
  }
  .nav-box h4{
    margin-left: 20px;
  }
  .tab-box{
    width:auto;
    margin-right:20px;
    position: relative;
    padding-left: 240px;
    top: 20px;
  }
</style>
